<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - trails</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<script type="module">

			import * as THREE from '../build/three.module.js';
			import Stats from './jsm/libs/stats.module.js';
			import { OrbitControls, MapControls } from './jsm/controls/OrbitControls.js';

			let stats;

			let camera, scene, renderer, clock,controls;

			
			let centerIndex=Math.ceil(25*25/2);
			let heartIndex=[
				(centerIndex-25*2)-3,(centerIndex-25*2)-2,(centerIndex-25*2)+2,(centerIndex-25*2)+3,
				(centerIndex-25*1)-4,(centerIndex-25*1)-1,(centerIndex-25*1)+1,(centerIndex-25*1)+4,
				centerIndex-4,centerIndex,centerIndex+4,
				(centerIndex+25*1)-4,(centerIndex+25*1)+4,
				(centerIndex+25*2)-3,(centerIndex+25*2)+3,
				(centerIndex+25*3)-3,(centerIndex+25*3)+3,
				(centerIndex+25*4)-2,(centerIndex+25*4)+2,
				(centerIndex+25*5)-1,(centerIndex+25*5)+1,
				centerIndex+25*6
			];
			let heartColor=new THREE.Color( 1, 0, 0 );
			let colors=[],tempColors=0,targetColors=[];
			let bufferGeo;
			let s_x=-120,x_y=-120;
			let color1=new THREE.Color(0xFF0000),color2=new THREE.Color(0x00F5FF);
			init();
			animate();
			function init() {

				const container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
				
				controls = new OrbitControls( camera, renderer.domElement );
				camera.position.set( 0, 0, 200 );
				controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
				controls.dampingFactor = 0.05;
				
				controls.screenSpacePanning = false;
				
				controls.minDistance = 100;
				controls.maxDistance = 500;
				
				controls.maxPolarAngle = Math.PI / 2;

				scene = new THREE.Scene();

				let vertices=[];
				
				for(var r=0;r<=24;r++){
					var row_x=s_x+r*10;
					for(var c=0;c<=24;c++){
						colors.push(color2);
						vertices.push(new THREE.Vector3(row_x,x_y+c*10,0));
						let isContainer=heartIndex.indexOf(25*r+c);
						if(isContainer>-1){
							targetColors.push(color1.r,color1.g,color1.b);
						}else{
							targetColors.push(color2.r,color2.g,color2.b);
						}
					}
				}
				bufferGeo=new THREE.BufferGeometry();
				//bufferGeo.setAttribute("position",new THREE.Float32BufferAttribute(vertices,3));
				bufferGeo.setFromPoints(vertices);
				
				//vertices plane.geometry.attributes["position"].array  new THREE.Float32BufferAttribute(vertices,3)
				bufferGeo.setAttribute("position",new THREE.Float32BufferAttribute(bufferGeo.attributes["position"].array,3));
				bufferGeo.setAttribute("color",new THREE.Float32BufferAttribute(targetColors,3));
				bufferGeo.computeBoundingSphere();
				let material=new THREE.PointsMaterial( { size: 3, vertexColors: true } );//new THREE.PointsMaterial({color:new THREE.Color(1,1,0)});//
				let points=new THREE.Points(bufferGeo,material);
				points.rotateZ(Math.PI*1.5);
				scene.add(points);

				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				//renderer.autoClearColor = false;
				container.appendChild( renderer.domElement );

				stats = new Stats();
				container.appendChild( stats.dom );

				window.addEventListener( 'resize', onWindowResize );
			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );
				controls.update();
				renderer.render( scene, camera );
				
				targetColors=[];
				for(var c=0;c<colors.length;c++){
					let isContainer=heartIndex.indexOf(c+tempColors);
					if(isContainer>-1){
						targetColors.push(color1.r,color1.g,color1.b);
					}else{
						targetColors.push(color2.r,color2.g,color2.b);
					}
				}
				bufferGeo.setAttribute("color",new THREE.Float32BufferAttribute(targetColors,3));
				bufferGeo.needsUpdate=true;
				
				stats.update();
				if(tempColors==20)tempColors=0;
				tempColors++;
			}

		</script>

	</body>
</html>
